<template>
  <div class="address-selector">
    <div class="address-header">
      <h3>{{ title }}</h3>
      <el-button type="primary" link @click="showAddressDialog" v-if="showAddButton">
        添加新地址
      </el-button>
    </div>
    <div class="address-list" v-if="orderStore.addresses.length">
      <div v-for="address in orderStore.addresses" 
           :key="address.id" 
           class="address-item"
           :class="{ 'active': modelValue === address.id }" 
           @click="selectAddress(address.id)">
        <div class="address-info">
          <p class="contact">
            <span class="name">{{ address.recipientName }}</span>
            <span class="phone">{{ address.phoneNumber }}</span>
            <el-tag v-if="address.isDefault" type="danger" size="small" style="margin-left: 20px;">默认地址</el-tag>
          </p>
          <p class="detail">{{ address.province }} {{ address.city }} {{ address.district }} {{ address.streetAddress }}</p>
        </div>
        <el-icon v-if="modelValue === address.id" class="check-icon">
          <Check />
        </el-icon>
      </div>
    </div>
    <el-empty v-else description="暂无收货地址" />

    <!-- 地址编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="addressForm" :rules="rules" ref="addressFormRef" label-width="100px">
        <el-form-item label="收货人" prop="recipientName">
          <el-input v-model="addressForm.recipientName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="addressForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="region">
          <area-selector 
            v-model="addressForm.region"
            :regionData="regionData"
            :codeToText="codeToText"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="streetAddress">
          <el-input type="textarea" v-model="addressForm.streetAddress"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="back()">取 消</el-button>
          <el-button type="primary" @click="saveAddress">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Check } from '@element-plus/icons-vue'
import AreaSelector from '@/components/AreaSelector.vue'
import { regionData, codeToText } from 'element-china-area-data'
import { useOrderStore } from '@/stores/orderStore'
import { useAddress } from '@/composables/useAddress'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  title: {
    type: String,
    default: '收货地址'
  },
  showAddButton: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue'])

const orderStore = useOrderStore()
const {
  dialogVisible,
  dialogTitle,
  addressForm,
  addressFormRef,
  rules,
  showAddressDialog,
  editAddress,
  back,
  saveAddress,
  deleteAddress
} = useAddress()

// 选择地址
const selectAddress = (id) => {
  emit('update:modelValue', id)
}

onMounted(async () => {
  await orderStore.findAddresses()
  // 如果没有选中的地址，且有地址列表，则默认选中第一个地址
  if (!props.modelValue && orderStore.addresses.length > 0) {
    selectAddress(orderStore.addresses[0].id)
  }
})
</script>

<style scoped>
.address-selector {
  width: 100%;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.address-header h3 {
  margin: 0;
}

.address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.address-item {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.address-item:hover {
  border-color: #409EFF;
}

.address-item.active {
  border-color: #409EFF;
  background: #f0f9ff;
}

.contact {
  margin-bottom: 8px;
}

.name {
  font-weight: bold;
  margin-right: 15px;
}

.phone {
  color: #666;
}

.detail {
  color: #666;
  font-size: 14px;
}

.check-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #409EFF;
}
</style> 